<template>
	<uni-echarts @onInit="myinit" ref="chart" :width="width" :height="height" />
</template>

<script>
	import * as echarts from 'echarts'
	import UniEcharts from './UniEcharts.vue'
	export default {
		name: 'Line',
		chart: null,
		components: {
			UniEcharts
		},
		props: {
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '500rpx'
			},
			dataList: {
				type: Array,
				required: true
			}
		},
		beforeDestroy() {
			if (this.chart) {
				this.chart.clear()
				this.chart.dispose()
				this.chart = null
			}
		},
		watch: {
			dataList: {
				deep: true,
				handler() {
					this.setOptions()
				}
			}
		},
		methods: {
			// 就是返回echarts配置项的
			setOptions() {
				const xData = [];
				const yData = [];
				for (const oneData of this.dataList) {
					xData.push(oneData.time)
					yData.push(oneData.val)
				}
				const option = {
					grid: {
						left: '5%',
						top: '10px',
						bottom: '21%',
						containLabel: true
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					dataZoom: [{
						start: 0,
						end: 100,
						top: '80%',
						handleIcon: 'M0,0 v9.7h5 v-9.7h-5 Z',
						handleSize: '80%',
						handleStyle: {
							color: '#fff',
							shadowBlur: 3,
							shadowColor: 'rgba(0, 0, 0.3, 0.6)',
							shadowOffsetX: 2,
							shadowOffsetY: 2
						}
					}],
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: xData,
						axisLine: {
							show: true,
							lineStyle: {
								color: 'grey'
							}
						},
						textStyle: {
							color: 'grey'
						}
					},
					yAxis: {
						type: 'value',
						axisLine: {
							show: true,
							lineStyle: {
								color: 'grey'
							}
						},
						textStyle: {
							color: 'grey'
						}
					},
					series: [{
						data: yData,
						type: 'line',
						smooth: true,
						// markPoint: {
						// 	data: [{
						// 			type: 'max',
						// 			name: '最大值',
						// 			valueIndex: 1
						// 		},
						// 		{
						// 			type: 'min',
						// 			name: '最小值'
						// 		}
						// 	],
						// },
						markLine: {
							data: [{
								type: 'average',
								name: this.$t('average')
							}]
						},
						symbol: 'none',
						sampling: 'average',
						itemStyle: {
							color: this.$store.state.themeConfig.primaryColor //'#70c8e2'
						},
						areaStyle: {
							color: '#f5f8fd' //'#f5f8fd'
						}
					}]
				}
				if (this.chart) {
					this.chart.setOption(option)
				}

			},
			myinit(e) {
				let {
					width,
					height,
					canvasDpr,
					canvas
				} = e
				echarts.setCanvasCreator(() => canvas)
				this.chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				canvas.setChart(this.chart)
				this.setOptions()
				this.$refs.chart.setChart(this.chart)
			}
		}
	}
</script>
